<template>
  <div class="content">

    <el-form :inline="true"  class="demo-form-inline">
      <el-form-item>
        <el-input  placeholder="账号名称" v-model="username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  @click="getList(username)">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="table"
      border
      stripe
      style="width: 100%"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(255, 255, 255, 0.7)"
    >
      <el-table-column
        prop="username"
        label="账号">
      </el-table-column>
      <el-table-column
        label="账号身份">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.roleType===1">学生</el-tag>
          <el-tag v-if="scope.row.roleType===2" type="success">老师</el-tag>
          <el-tag v-if="scope.row.roleType===3"type="warning">家长</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="openid"
        label="是否绑定微信">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.openid===null||scope.row.openid===''" type="danger">未绑定微信</el-tag>
          <el-tag v-else type="success">已绑定微信</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-popconfirm title="这是确定重置吗？" @onConfirm="handleRePass(scope.row.id)">
            <el-button slot="reference" type="text" size="small">重置密码</el-button>
          </el-popconfirm>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="这是确定解绑吗？" @onConfirm="handleReVX(scope.row.id)">
            <el-button type="text" size="small" slot="reference">解绑微信</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</template>

<script>
import { getList, repass, reVX } from '@/api/sysUser/user'

export default {
  name: "User",
  data() {
    return {
      loading: true,
      // 分页用到的属性
      total: 0,
      current: 1,
      size: 10,
      //表格
      table: [],
      //搜索
      username:"",

    }
  },
  created() {
    this.getList()
  },
  methods: {
    //这里是分页
    handleSizeChange(val) {
      this.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getList()
    },
    getList(){
      getList(this.username,this.current,this.size).then(res=>{
        this.table = res.data.data.records
        this.size = res.data.data.size
        this.total = res.data.data.total
        this.current = res.data.data.current
        this.loading = false
      })
    },
    handleRePass(id){
      repass(id).then(res => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        })
        this.getList()
      })
    },
    handleReVX(id){
      reVX(id).then(res => {
        this.$message({
          message: res.data.msg,
          type: 'success'
        })
        this.getList()
      })
    }

  }
}
</script>

<style scoped>

</style>
